<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import SuanliDialog from '@/components/SuanliDialog.vue';


const showSuanliDialog = ref(false);

const router = useRouter()
const isPopupVisible = ref(false)
const qrCode = ref('/assets/images/qrcode.png')

// 联系客服
const contact = () => {
  showSuanliDialog.value = true;
}


// 前往修改密码页面
const toChangePassword = () => {
  router.push('/forgot-password')
}
</script>

<template>
  <div class="forgot-password-page">
    <SuanliDialog
      v-model="showSuanliDialog"
      type="vip"
      :show-cancel="true"
    >
    </SuanliDialog>
    <!-- 返回按钮 -->
    <div class="header">
      <button class="back-button" @click="router.back()">
        <span class="back-icon">←</span>
      </button>
    </div>

    <div class="top-text">
      <h1 class="top-text-title">忘记密码</h1>
      <p class="top-text-subtitle">请重置你的密码</p>
    </div>

    <div class="content">
      <div class="item" @click="toChangePassword">
        <h2 class="text-primary">设置新密码</h2>
        <p class="text-secondary">您的新密码必须不同于以前使用的密码</p>
      </div>

      <div class="item" @click="contact">
        <h2 class="text-primary">联系客服修改密码</h2>
        <p class="text-secondary">如手机号不能接收验证码，请联系客服处理</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.forgot-password-page {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/login/bg.png') no-repeat center / cover;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  // 头部导航
  .header {
    padding: 20px;
    display: flex;
    align-items: center;

    .back-button {
      background: transparent;
      border: none;
      font-size: 24px;
      color: #1a1a1a;
      cursor: pointer;
      padding: 8px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
        transform: translateX(-2px);
      }
      
      .back-icon {
        font-weight: bold;
        display: block;
        line-height: 1;
      }
    }
  }

  // 顶部文字
  .top-text {
    padding-top: 80px;
    padding-left: 36px;
    margin-bottom: 40px;
    box-sizing: border-box;
    animation: fadeInDown 0.6s ease;

    &-title {
      font-weight: 700;
      font-size: 28px;
      color: #00042d;
      margin-bottom: 12px;
      position: relative;
      display: inline-block;
      
      // &::after {
      //   content: '';
      //   position: absolute;
      //   bottom: -5px;
      //   left: 0;
      //   width: 40px;
      //   height: 4px;
      //   background: linear-gradient(90deg, #006cff 0%, #009fff 100%);
      //   border-radius: 2px;
      // }
    }

    &-subtitle {
      font-weight: 400;
      font-size: 16px;
      color: #595959;
      margin-top: 15px;
    }
  }

  // 主内容区
  .content {
    padding: 0 20px;
    box-sizing: border-box;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    animation: fadeInUp 0.6s ease;

    .item {
      width: 100%;
      padding: 30px;
      background: #ffffff;
      border-radius: 20px;
      margin-bottom: 26px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 5px 20px rgba(0, 108, 255, 0.08);
      border-left: 4px solid transparent;
      box-sizing: border-box;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 108, 255, 0.15);
        border-left: 4px solid #006cff;
      }

      .text-primary {
        font-weight: 600;
        font-size: 18px;
        color: #00042d;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        
        // &::before {
        //   content: '';
        //   display: inline-block;
        //   width: 8px;
        //   height: 8px;
        //   background: linear-gradient(90deg, #006cff 0%, #009fff 100%);
        //   border-radius: 50%;
        //   margin-right: 10px;
        // }
      }

      .text-secondary {
        font-weight: 400;
        font-size: 14px;
        color: #595959;
        line-height: 1.5;
      }
    }
  }

  // 弹窗样式
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
    
    .popup-content {
      width: 85%;
      max-width: 350px;
      background: white;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      animation: scaleIn 0.3s ease;
      
      .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 20px;
        background: linear-gradient(90deg, rgba(0, 108, 255, 0.05) 0%, rgba(0, 159, 255, 0.05) 100%);
        border-bottom: 1px solid #eee;
        
        span {
          font-weight: 600;
          font-size: 18px;
          color: #00042d;
        }
        
        .close-button {
          background: transparent;
          border: none;
          font-size: 24px;
          cursor: pointer;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: rgba(0, 0, 0, 0.05);
            transform: rotate(90deg);
          }
        }
      }
      
      .popup-body {
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .qr-code {
          width: 200px;
          height: 200px;
          margin-bottom: 20px;
          border-radius: 10px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s ease;
          
          &:hover {
            transform: scale(1.02);
          }
        }
        
        .popup-text {
          font-size: 15px;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { 
    opacity: 0;
    transform: translateY(30px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from { 
    opacity: 0;
    transform: translateY(-20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.9);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

// 响应式设计
@media (max-width: 480px) {
  .forgot-password-page {
    .top-text {
      padding-top: 60px;
      padding-left: 25px;
      margin-bottom: 30px;
      
      &-title {
        font-size: 24px;
      }
      
      &-subtitle {
        font-size: 14px;
      }
    }
    
    .content {
      padding: 0 15px;
      
      .item {
        padding: 25px 20px;
        box-sizing: border-box;
        
        .text-primary {
          font-size: 16px;
        }
        
        .text-secondary {
          font-size: 13px;
        }
      }
    }
  }
}
</style>
